<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('公告列表')" />
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="role-form">
                <div class="select-list">
                    <ul>
                        <li>
                            公告类型：<input type="text" name="nname"/>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>

        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table"></table>
        </div>
    </div>
</div>
<th:block th:include="include :: footer" />
<script th:inline="javascript">
    var editFlag = [[${@permission.hasPermi('system:role:edit')}]];
    var removeFlag = [[${@permission.hasPermi('system:role:remove')}]];
    var prefix = ctx + "notice/eCharts";

    $(function() {
        var options = {
            url: prefix + "/getOption",
            sortName: "tname",
            modalName: "公告类型",
            columns: [{
                checkbox: true
            },
                {
                    field: 'tname',
                    title: '公告类型',
                    sortable: true
                },
                {
                    field: 'tnum',
                    title: '公告数量'
                },
                {
                    field: 'tvisit',
                    title: '访问量'

                },

                ]
        };
        $.table.init(options);
    });

</script>
<!--<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-6" id="main">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>折线图</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="graph_flot.html#">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="echarts" id="echarts-line-chart"></div>
                </div>
            </div>
        </div>
        <div class="col-sm-6" id="main1">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>柱状图</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="graph_flot.html#">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="echarts" id="echarts-bar-chart"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: echarts-js" />
<script type="javascript">
    var prefix=ctx+"notice/eCharts";

    $.ajax({
        type:"post",
        async:true,
        url: prefix + "/getOption",
        data:{},
        dataType:"json",
        success:function (rs) {
            if (rs){
                for (var i=0;i<rs.length;i++){
                    names.push(rs[i].tname);
                }
                for(var i=0;i<rs.length;i++){
                    nums.push(rs[i].tnum);
                }
                lineChart.hideLoading();
                lineChart.setOption({
                    title : {
                        text: '公告发布量'
                    },
                    tooltip : {
                        trigger: 'axis'
                    },
                    grid:{
                        x:40,
                        x2:40,
                        y2:24
                    },
                    calculable : true,
                    XAxis:{
                        name:'公告类型',
                        data:names
                    },
                    series:[{
                        name:'发布量',
                        data:nums
                    }]
                });
            }
        },
        error:function (errorMsg) {
            alert("请求数据失败")
        }
    })


        $(function () {
            var lineChart = echarts.init(document.getElementById("echarts-line-chart"));
            var lineoption = {

                title : {
                    text: '公告发布量'
                },
                tooltip : {
                    trigger: 'axis'
                },
                grid:{
                    x:40,
                    x2:40,
                    y2:24
                },
                calculable : true,
                xAxis : [
                    {
                        type : 'category',
                        boundaryGap : false,
                        data : []
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        axisLabel : {
                            formatter: '{value} '
                        }
                    }
                ],
                series: [
                    {
                        name:'发布量',
                        type:'line',
                        data:[]
                    },

                ]
            };
            lineChart.setOption(lineoption);
            $(window).resize(lineChart.resize);-->


   <!-- var barChart = echarts.init(document.getElementById("echarts-bar-chart"));
    var baroption = {
        title : {
            text: '公告访问人数'
        },
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:['访问量']
        },
        grid:{
            x:30,
            x2:40,
            y2:24
        },
        calculable : true,
        xAxis : [
            {
                type : 'category',
                data : ['八卦','小道消息','周刊','研报']
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'访问量',
                type:'bar',
                data:[2, 5, 7, 23],
                markPoint : {
                    data : [
                        {type : 'max', name: '最大值'},
                        {type : 'min', name: '最小值'}
                    ]
                },
                markLine : {
                    data : [
                        {type : 'average', name: '平均值'}
                    ]
                }
            }
        ]
    };
    barChart.setOption(baroption);

    window.onresize = barChart.resize;
});
</script>-->
</body>
</html>